<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>头条</p>
  <p>科技</p>
  <p>美食</p>
  <p>娱乐</p>
  <script>
    // 1.获取所有span
    const btns = document.querySelectorAll('p')
    // 2.循环所有span
    btns.forEach((item) => {
      // 3.为每一个span绑定点击事件
      item.addEventListener('click', () => {
        btns.forEach(i => {
          // 4.先去掉所有span 的颜色
          i.style.background = 'transparent'
        })
        // 5.把当前点击的span 设置颜色
        item.style.background = 'pink'
      })
    })
  </script>
</body>

</html>